<!DOCTYPE html>
<html class="x-admin-sm">

    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/Public/css/font.css">
        <link rel="stylesheet" href="/Public/css/xadmin.css">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="/Public/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/Public/js/xadmin.js"></script>
        <script type="text/javascript" src="/Public/js/jquery.min_1.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
              <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
              <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
            <![endif]-->
        <style>
            .bg{
                background: #E0E0E0;
            }
            .x-admin-sm .layui-table td, .x-admin-sm .layui-table th{
                text-align: center;
            }
            .layui-table td img{
                width: 100px;
                height: 100px;
                background: gray;
            }
            .type{
                width: 300px;
                display: flex;
                align-items: center;
                align-content: center;
                justify-content: center;
                margin: auto;
                float: left;
            }
            .type-title{
                border-right: 1px solid #e6e6e6;
                height:50px;
                line-height: 50px;
                padding-right: 30px;
                min-width: 100px;
            }
            .type-info{
                min-width: 160px;
                padding-left: 30px;
                text-align: left;
                height: 50px;
            }
            .statu{
                float: right;
                line-height: 50px;
            }
            #typepop .layui-col-space5{
                margin: 10px 20px;
            }
        </style>
    </head>

    <body>
        <!-- <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a><cite>导航元素</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
                title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div> -->
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <!--                    <div class="layui-card">
                                            <div class="layui-card-header bg">搜索条件</div>
                                            <div class="layui-card-body ">
                                                <div class="layui-form layui-col-space5">
                                                    <div class="layui-input-inline layui-show-xs-block">
                                                        <input class="layui-input" placeholder="名称" id="name">
                                                    </div>
                                                    <div class="layui-input-inline layui-show-xs-block">
                                                        <select name="contrller" id="onsale">
                                                            <option value="">上下架</option>
                                                            <option value="1">已上架</option>
                                                            <option value="2">已下架</option></select>
                                                    </div>
                                                    <div class="layui-input-inline layui-show-xs-block">
                                                        <button class="layui-btn layui-btn-danger" id="search">确定</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>-->
                    <div class="layui-card">

                        <div class="layui-card-header bg"> 
                            <!--<a href="/Admin/Question/addQuestion"><button class="layui-btn" id="add" style="margin-left:10px;">新增问题</button></a>-->
                            <!--<button class="layui-btn" id="addtype" style="margin-left:10px;">添加分类</button>-->
                        </div>

                        <div class="layui-card-body " id="content">
                            <table class="layui-table layui-form">
                                <thead>
                                    <tr>
                                        <th width="70">编号</th>
                                        <th>分类名</th>
                                        <th>是否可用</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                </thead>
                                <tbody class="x-cate">
                                <foreach name="cate" item="val">
                                    <tr cate-id='1' fid='0'>
                                        <td>{$key+1}</td>
                                        <td>{$val['value']}</td>
                                        <td class='use'>{$val['inuse'] == 1 ? '启用' : '禁用'}</td>
                                        <td>{$val['createdt']}</td>
                                        <td class="td-manage">
                                    <if condition="$val['inuse'] eq 1">
                                        <button class="layui-btn layui-btn layui-btn-xs saveQ" data-data='2' data-id="{$val['id']}">禁用</button>
                                        <else />
                                        <button class="layui-btn layui-btn layui-btn-xs saveQ" data-data='1' data-id="{$val['id']}">启用</button>
                                    </if>
                                    <button class="layui-btn layui-btn layui-btn-xs editClass" data-id="{$val['id']}">编辑</button>
                                    </td>

                                    </tr>
                                </foreach>
                                </tbody>
                            </table>
                            <div class="layui-card-body ">
                                <div class="page">
                                    {$page}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div id="addtypetep" style="display:none">
            <div class="layui-form layui-col-space5">
                <div class="layui-input-inline">菜品分类：</div>
                <div class="layui-input-inline layui-show-xs-block">
                    <input class="layui-input" placeholder="分类名" name="cate_name" id="vtype">
                </div>
            </div>
            <!--            <form class="layui-form layui-col-space5">
                            <div class="layui-input-inline">状态：</div>
                            <div class="layui-input-inline layui-show-xs-block ">
                                <input type="checkbox" name="switch1" lay-text="开启|停用" id="vstatus" lay-skin="switch">
                            </div>
                        </form>-->

        </div>
        <script>

            $("#search").on("click", function() {
                var data = {};
                data.onsale = $("#onsale").val();
                data.name = $("#name").val();
                $.post("/Admin/FoodProduct/index", data, function(msg) {
                    $("#content").html(msg);
                });
            })
            $('body').on('click', '.page a', function() {
                var pageObj = this;
                var url = pageObj.href;
                $.ajax({
                    type: 'get',
                    url: url,
                    data: {},
                    success: function(res) {
                        $("#content").html(res);
                    }
                })
                return false;
            })
            $('body').on('click', '.editClass', function() {
                var id = $(this).attr('data-id');
                var parentName = $(this).parent('td').siblings().eq(1);
                var name = $(this).parent('td').siblings().eq(1).html()
                layer.prompt({
                    title: '编辑分类',
                    id: 'editClassMsg',
                    value: name
                }, function(val, index) {
                    if (val.length > 0) {
                        $.post("/Admin/FoodProduct/saveInuse", {id: id, cate: val}, function(msg) {
                            if (msg.code == 10000) {
                                parentName.html(val)
                                layer.closeAll();
                            }
                        })
                    }
                });
            })







            $(document).on('click', '.saveQ', function() {
                var that = $(this);
                var id = $(this).attr("data-id");
                var inuse = $(this).attr('data-data');
                $.post("/Admin/FoodProduct/saveInuse", {id: id, inuse: inuse}, function(msg) {
                    if (msg.code == 10000) {
                        var text = inuse == 1 ? "启用" : "禁用";
                        var num = inuse == 1 ? 2 : 1;
                        that.parents('tr').find('.use').html(text);
                        that.attr('data-data', num)
                        that.html(inuse == 2 ? "启用" : "禁用")
                    }
                })
            })


            $('#addtype').click(function() {
                layer.open({
                    type: 1,
                    id: 'typepop',
                    area: ['350px', 'auto'],
                    btn: ['确定', '取消'],
                    content: $('#addtypetep').html(),
                    success: function() {
                        layui.use(['form'], function() {
                            form = layui.form;
                        });
                    },
                    yes: function(index, layero) {
//                        console.log($('#typepop #vtype').val())
//                        console.log($('#vstatus').is(":checked"))
                        $.post("/Admin/FoodProduct/addClass", {name: $('#typepop #vtype').val()}, function(msg) {
                            if (msg.code == 10000) {
                                layer.alert('完成', {title: "提示"});
                            } else {
                                layer.alert(msg.msg, {title: "提示"})
                            }
                        })

                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    }
                });
            })

//            layui.use(['form'], function() {
//                form = layui.form;
//
//            });

            /*用户-删除*/
            function member_del(obj, id) {
                layer.confirm('确认要删除吗？', function(index) {
                    //发异步删除数据
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!', {icon: 1, time: 1000});
                });
            }

            // 分类展开收起的分类的逻辑
            // 
            $(function() {
                $("tbody.x-cate tr[fid!='0']").hide();

                // 栏目多级显示效果
                $('.x-show').click(function() {
                    if ($(this).attr('status') == 'true') {
                        $(this).html('&#xe625;');
                        $(this).attr('status', 'false');
                        cateId = $(this).parents('tr').attr('cate-id');
                        $("tbody tr[fid=" + cateId + "]").show();
                    } else {
                        cateIds = [];
                        $(this).html('&#xe623;');
                        $(this).attr('status', 'true');
                        cateId = $(this).parents('tr').attr('cate-id');
                        getCateId(cateId);
                        for (var i in cateIds) {
                            $("tbody tr[cate-id=" + cateIds[i] + "]").hide().find('.x-show').html('&#xe623;').attr('status', 'true');
                        }
                    }
                })
            })

            var cateIds = [];
            function getCateId(cateId) {
                $("tbody tr[fid=" + cateId + "]").each(function(index, el) {
                    id = $(el).attr('cate-id');
                    cateIds.push(id);
                    getCateId(id);
                });
            }

        </script>
    </body>

</html>